<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-22 09:25  --
--  @version: 1.0              --
-------------------------------->
<!--  -->
<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="col-dev">
        <el-row :gutter="20">
          <el-col :span="24">
            <div>
              <span style="color: #a52a2a; ">基本信息</span>
              <el-divider/>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              设备Id: {{ deviceGuid }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              在线状态: {{ deviceData.deviceOnlineStatus === 0 ? "离线" : "在线" }}
            </div>
          </el-col>
          <el-divider/>
          <el-col :span="12">
            <div>
              生产产线: {{ deviceData.productionLine }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              机床名称: {{ deviceData.machineName }}
            </div>
          </el-col>
          <el-divider/>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="col-dev">
        <el-row :gutter="20">
          <el-col :span="24">
            <div>
              <span style="color: #a52a2a; ">阈值信息</span>
              <el-divider/>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              停机值: {{ thresholdData.stopMax }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              X轴阈值: {{ thresholdData.xThreshold }}
            </div>
          </el-col>
          <el-divider/>
          <el-col :span="12">
            <div>
              Y轴阈值: {{ thresholdData.yThreshold }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              Z轴阈值: {{ thresholdData.zThreshold }}
            </div>
          </el-col>
          <el-divider/>
        </el-row>
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="12">
      <div class="col-dev">
        <el-row :gutter="20">
          <el-col :span="24">
            <div>
              <span style="color: #a52a2a; ">预警信息</span>
              <el-divider/>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              设备Id: {{ deviceGuid }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              预警状态: {{ alarmData.alarmStatus === 0 ? "关闭" : "开启" }}
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="col-dev">
        <el-row :gutter="20">
          <el-col :span="24">
            <div>
              <span style="color: #a52a2a; ">其它</span>
              <el-divider/>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              停机值: {{ deviceGuid }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              X轴阈值: {{ deviceGuid }}
            </div>
          </el-col>
          <el-divider/>
          <el-col :span="12">
            <div>
              Y轴阈值: {{ deviceGuid }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              Z轴阈值: {{ deviceGuid }}
            </div>
          </el-col>
          <el-divider/>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {getDeviceDesc} from "@/api/auth/device.ts";
import {RespResult} from "@/api";
import {SUCCESS} from "@/utils/constants.ts";
import {ElMessage} from "element-plus";

const deviceGuid = ref()

const deviceData = ref({
  deviceOnlineStatus: 0,
  productionLine: "",
  machineName: ""
});
const alarmData = ref({
  alarmStatus: 0
});

const quartzData = ref({});
const thresholdData = ref({
  stopMax: "",
  xThreshold: "",
  yThreshold: "",
  zThreshold: ""
});


/*详情数据*/
/*详情数据*/
onMounted(() => {
  // 获取参数
  deviceGuid.value = useRoute().query.deviceGuid;
  initDeviceDescData(deviceGuid.value);
})

const initDeviceDescData = async (deviceGuid: string) => {
  //发送请求
  await getDeviceDesc({deviceGuid: deviceGuid}).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          const deviceDesc = JSON.parse(response.data);
          deviceData.value = deviceDesc.deviceEntity;
          thresholdData.value = deviceDesc.thresholdEntity;
          alarmData.value = deviceDesc.alarmRecordDTO;
          quartzData.value = deviceDesc.quartzEntity;
        } else {
          ElMessage({
            message: "获取数据失败",
            type: 'error'
          })
        }
      }
  )
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.col-dev {
  border: #545c64 solid 1px;
  padding: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>